<template name="popupMassage">
  <view>
    <!-- 消息提示 -->
    <view class="info">
      <view class="iconfont icon-xinxi text-gray" @click="toggleOpen">
      </view>
    </view>
    <uni-popup ref="popup" type="center" :maskClick="status">
      <view class="popup-content">
        <view class="iconfont icon-ic24-close" @click="toggleClose">
        </view>
        <view class="title text-center text-black text-lg">
          <text>暂停片刻，该休息了</text>
        </view>
        <view class="essay text-left text-gray text-bold">
          <text>
            "能量小睡"就是俗称的午睡。午睡不仅能有效恢复精力，还能舒缓身心，改善人们的情绪，各种实例都证明，午睡能让所有人受益。\n
          </text>
          <text>\n</text>
          <text>
            通过小睡最大化利用白天的每个小时，并让自己发挥出最佳状态。睡不着也不要紧，事实证明，只要闭上眼睛，脱离这个世界片刻，徘徊在似睡非睡的朦胧中，同样能起到对人体有益的放松作。
          </text>
        </view>
        <view class="note-img">
          <image src="../static/note.png" mode=""></image>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
  import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
  import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
  export default {
    name: "popupMassage",
    components: {
      uniPopupMessage,
      uniPopupDialog,
      uniPopupShare
    },
    data() {
      return {
        status: false
      };
    },
    methods: {
      toggleOpen() {
        this.$refs.popup.open()
      },
      toggleClose() {
        this.$refs.popup.close()
      }
    }
  }
</script>

<style lang="scss">
  .info {
    .icon-xinxi {
      font-size: 40rpx;
    }
  }

  .popup-content {
    background-color: #FFFFFF;
    width: 500rpx;
    height: 700rpx;
    z-index: 999;
    overflow: hidden;

    .icon-ic24-close {
      position: absolute;
      right: 0;
      top: -80rpx;
      font-size: 35rpx;
      border: 4rpx solid;
      border-radius: 50%;
      color: #F3F3F3;
      padding: 2rpx;
    }

    .title {
      margin: 50rpx 0 30rpx;
      font-weight: 500;
    }

    .essay {
      font-size: 26rpx;
      padding: 0 25rpx 0 26rpx;
    }

    .note-img {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin: 20rpx 30rpx;
      image {
        display: block;
        width: 150rpx;
        height: 150rpx;
      }
    }
  }
</style>
